import React from 'react';
import _ from 'lodash';
import { connect } from 'react-redux';

const light = require('../image/light.png');
class Step extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			data: []
		}
	}

	componentWillReceiveProps(props) {
		if (this.props.userReducer.step !== props.userReducer.step) {
			this.setState({data: this.createNewStep(props.userReducer.step.flowBaseInfo.flowProcesses)})
		}
	}
	createNewStep(arrs) {
		const arr =  _.cloneDeep(arrs);
		const newArr = [];
		for (let i = 0, len = arr.length; i < len;i++) {
			if (i === 0) {
				newArr.push(arr[i]);
				continue;
			}
			const newArrLen = newArr.length - 1;
			if (!newArr[newArrLen].children) {
				newArr[newArrLen].children = [];
			}
			if (arr[i].parentId === newArr[newArrLen].flowId) {
				newArr[newArrLen].children.push(arr[i]);
			} else {
				newArr.push(arr[i]);
			}
		}
		let flag = 0;
		for (let i = 0, len = newArr.length; i < len;i++) {
			if (newArr[i].state === 1) {
				flag = i;
			}
			const lens = newArr[i].children.length;
			if (lens === 0) {
				if (newArr[i].state === 1) {
					if (newArr[i+1] && newArr[i+1].state === 1) {
						newArr[i].complete = 1;
					} else {
						newArr[i].halfComplete = 1;
					}
				}
				continue;
			} 
			let num = 0; 
			for (let value of newArr[i].children) {
				if (value.state === 1) {
					num ++;
				}
			}
			if (num === lens && newArr[i].state === 1 && newArr[i+1] && newArr[i+1].state === 1) {
				newArr[i].complete = 1;
			}

		}
		newArr[flag].currentState = true;
		console.log(newArr)
		return newArr;
	}



	render() {
		return (
			<div className='step-div' style={{paddingTop: `${this.state.data.length > 0 ? '0.6' : '0'}rem`, width: '1.94rem', paddingBottom: `${this.state.data.length > 0 ? '2' : '0'}rem`}}>
				{
					this.state.data.map((obj, index)=> {
						let num = 0;
						for (const value of obj.children) {
							if (value.state === 1) {
								num ++;
							}
						}
						return (
							<div key={index} style={{display: 'flex'}}>
								<div className='step-svg' style={{justifyContent: `${index === this.state.data.length - 1 ? 'flex-start': 'center'}`}}>
									<div className='step-circle' style={{border: `1px solid ${obj.state === 1 ? '#5cb95c': '#929397'}`,backgroundColor: `${obj.complete && obj.complete === 1 ? '#5cb95c' : '#323844'}`}}>
									{obj.state === 1  ? !obj.currentState ? obj.complete && obj.complete === 1 ?
										<i className="fa fa-check" style={{fontSize: '0.2rem',marginTop: '0.05rem'}}></i> : null : <img src={light} className='step-circle-img' alt=''/> : null
									}
									</div>
									{ index !== this.state.data.length - 1 ?
										<div>
											<div className='step-font-line' style={{border: `1px solid ${obj.complete && obj.complete === 1 ? '#5cb95c' : obj.halfComplete && obj.halfComplete === 1 ? '#5cb95c' : '#929397'}`}}></div>
											<div className='step-font-line' style={{border: `1px solid ${obj.complete && obj.complete === 1 ? '#5cb95c' : '#929397'}`}}></div>
											<div className='step-green' style={{height:`${num * 0.5}rem`,border: `${num === 0 ? '0':'1'}px solid #5cb95c`}}></div>
										</div> : null
									}
								</div>
								<div className='step-font-content'>
									<span style={{fontSize: '0.28rem',color: `${obj.state === 1 ? '#fff' : '#BABABB'}`}}>{obj.flowName}</span>
									{obj.children.map((value, index)=>{
										return(
											<span key={index} className='step-font-items' style={{color: `${value.state === 1 ? '#5CB95C' : '#BABABB'}`}}>{value.flowName}</span>
										);
									})}
								</div>

							</div>
						);
					})
				}
			</div>
		);
	}
}


function mapStateToProps(state) {
  const { userReducer } = state;
  return {
    userReducer
  };
}

export default connect(mapStateToProps)(Step);